<style>
    .page {
        padding: 10px;
    }

    .u-title {
        padding: 20upx 0;
    }

    .g-type-wrap button:nth-child(3n) {
        margin-right: 0;
    }

    .u-type {
        display: inline-block;
        color: #fff;
        background: #fbb5b3;
        border-radius: 100px;
        padding: 18upx 30upx;
        margin: 0 72upx 20upx 0;
        transition: .3s;
    }

    .u-type.act {
        background: #d71611
    }

    .u-content {
        width: 100%;
        height: 400upx;
        background: #fff;
        padding: 20upx 20upx 60upx;
        box-sizing: border-box;
        margin-bottom: 40upx;
    }

    .u-tips {
        position: absolute;
        right: 20upx;
        bottom: 20upx;
        color: #ccc;
        font-size: 24upx;
    }

    .g-imgs {
        display: flex;
        flex-wrap: wrap;
    }

    .u-img {
        width: 200upx;
        height: 200upx;
        border-radius: 4px;
        margin-right: 44upx;
        overflow: hidden;
        background: #f5f5f5;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20upx;
    }

    .u-img image {
        width: 100%;
    }

    .g-imgs .u-img:nth-child(3n) {
        margin-right: 0;
    }

    .u-open {
        background: #c2c2c2;
    }

    .u-open image {
        width: 40%
    }
</style>
<template>
    <view class="page">
        <view class="u-title">反馈问题类型（必填）</view>
        <view class="g-type-wrap">
            <button class="u-type" v-for="(item,index) in aType" :key="index" :data-index="index" :class="[nType == index ? 'act' : '']"
                @tap="selectType">{{item}}</button>
        </view>
        <view :style="{position: 'relative'}">
            <textarea class="u-content" v-model="sContent" placeholder="选择问题类型我们可以更快定位处理您的反馈" @input="textarea"
                maxlength="200"></textarea>
            <view class="u-tips">{{nLen}}/200</view>
        </view>
        <view class="u-title">上传图片</view>
        <view class="g-imgs">
            <view class="u-img" v-for="(item,index) in aImg" :key="index" :data-index="index" @tap="chooseImg2">
                <image mode="widthFix" :src="item"></image>
            </view>
            <view class="u-img u-open" v-if="aImg.length!=6" @tap="chooseImg">
                <image src="../../../static/icons/user/camera.png" mode="widthFix"></image>
            </view>
        </view>
    </view>
</template>

<script>
    import henglang from '@/common/common.js';
	
    export default {
        data() {
            return {
                sContent: '',
                nLen: 0,
                nType: 0,
                aImg: [],
                aType: [
                    '功能异常',
                    '体验问题',
                    '新功能建议',
                    '其它',
                ]
            };
        },
        methods: {
            textarea(e) {
                this.sContent = e.target.value;
                this.nLen = e.target.value.length;
            },
            selectType(e) {
                this.nType = e.currentTarget.dataset.index;
            },
            chooseImg() {
                let that = this;

                uni.chooseImage({
                    count: 6 - this.aImg.length,
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {
                        that.aImg = that.aImg.concat(res.tempFilePaths);
                    }
                });
            },
            chooseImg2(e) {
                let index = e.currentTarget.dataset.index;
                let that = this;
                let origin = this.aImg;

                uni.chooseImage({
                    count: 1,
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {
                        origin.splice(index, 1, res.tempFilePaths[0]);
                        that.aImg = origin;
                    }
                });
            },
            onNavigationBarButtonTap(e) {
                if (e.index == 0) { // 点击保存
                    if (!this.sContent) {
                        henglang.showToast('请输入内容');
                        return;
                    }
                    henglang.showToast('提交成功')
                }
                
            }
        }
    }
</script>
